$(document).ready(function(){
    /**  
     * 天地图内容  
     */  
    var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {  
            maxZoom: 18,  
            minZoom: 2  
        }),  
        normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {  
            maxZoom: 18,  
            minZoom: 2  
        }),  
        imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {  
            maxZoom: 18,  
            minZoom: 2  
        }),  
        imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {  
            maxZoom: 18,  
            minZoom: 2  
        });
        
    var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {  
        maxZoom: 16,  
        minZoom: 1  
    });  
  	
  	var newmap = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png');
  	
    var normal = L.layerGroup([normalm, normala]),  
        image = L.layerGroup([imgm, imga]);  
   
         var baseLayers = {  
        "天地图": normal,  
        "天地图影像": image,
        "智图灰色": normalm4,
        "新地图": newmap,
    }
        
    
    var map = L.map("map", {  
        center: [27.98427566436123, 120.68041992606597],  
        zoom: 12,  
//      layers: [normalm4],
        layers: [newmap],
        zoomControl: false  
    });  
  	
  	
    L.control.layers(baseLayers, null).addTo(map);  
    L.control.zoom({  
        zoomInTitle: '放大',  
        zoomOutTitle: '缩小'  
    }).addTo(map);  
      
    	var list = [];
		var list2 = [];
		var list3 = [];
		var nodes = [];
		var count = 1;
		var count1 = 0
		var b = 0
		var jishu = 0;
		var stop = 0;
		var action = true;
		var fg, flag;
		var x = 28.02376523468831 - 28.020469307572167//28.019919976576134
		var y = 120.66282033920290 - 120.66672563552858
		var reaceselect_flag = true;
		var road_point, road_point_list = [], RS, RS_list = [], RS_list_detial = [], RS_list_detial1 = [];
		
//**********************************************获取路口,和所有路段***********************************************//
		$(function(){
			var show_taxi_flow_f = true;
			$( "#show_taxi_flow" ).on("click", function(){
				if(show_taxi_flow_f){
					show_taxi_flow_f = false;
					$( "#taxi_table" ).css("display", "none")
					$( "#flow_table" ).css("display", "block")
				}else{
					show_taxi_flow_f = true;
					$( "#taxi_table" ).css("display", "block")
					$( "#flow_table" ).css("display", "none")
				}
			})
			var data = {"x":132.3242432,"y":12.32356622}
			var jsondata = JSON.stringify(data)
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/posttest1/",
			  	success: function(result){
			  		road_point = result.data;	
			  		for (i=0; i<road_point.length; i++){
			  			road_point_list.push([
			  				parseFloat(road_point[i].lat),
			  				parseFloat(road_point[i].lng)
			  			])
			  		}
		  		},
		  		dataType: 'JSON',
			});
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/post_view2.0_4/",
			  	success: function(result){
			  		RS = result.data;
			  		for(var i = 0; i<RS.length; i++){
			  			RS_list.push(RS[i].R);
			  		}
			  		for(var i = 0; i<RS_list.length; i++){
			  			var xyz = [];
			  			for(var j = 0; j<RS_list[i].length; j++){
			  				xyz.push(RS_list[i][j].lat);
			  				xyz.push(RS_list[i][j].lng);
			  			};
			  			RS_list_detial.push(xyz);
			  		};
			  		for(var k = 0; k<RS_list.length; k++){
			  			var jk = RS_list[k].length-1;
			  			RS_list_detial1.push([
			  				[parseFloat(RS_list[k][0].lat),
			  				parseFloat(RS_list[k][0].lng)],
			  				
			  				[parseFloat(RS_list[k][jk].lat),
			  				parseFloat(RS_list[k][jk].lng)],
			  			])
			  		}
//			  		console.log(RS_list);
		  		},
		  		dataType: 'JSON',
			});
		});
		
		var abac = 480;
//		var flag_globle = self.setInterval(get_taxiData, 5000)
		get_taxiData();
		function get_taxiData(){
			if(abac == 1439){abac = 1}
			var data = {"x":1,"y": abac}
			var jsondata = JSON.stringify(data)
			yyy = 0;
			xxx_f = true;
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/post_view2.0_6/",
			  	success: function(result){
			  		yyy = result.data;
			  		initial1(yyy);
		  		},
		  		dataType: 'JSON',
			});
			abac  = abac+1;
		}
		function initial1(A){
			d3.selectAll(".taxi").remove();
			let c3 = d3.rgb(229,245,8), c4 = d3.rgb(245,75,8);
			var compute = d3.interpolate(c3,c4); 
			var linear = d3.scaleLinear()  
				           .domain([0,300])  
				           .range([0,1]);
			for(i = 0; i<300; i++){
					var pulsingIcon = L.icon.pulse({iconSize:[5,5],color: compute(linear(i)), fillColor:compute(linear(i)), extclassName:'taxi', heartbeat:1});
					var marker = L.marker(A[i].latlng,{icon: pulsingIcon}).addTo(map);
					};
			var dat1 = d3.selectAll(".taxi").data(A)
					     .on("mouseover", function(d){
					         var contant = "<p>car_nb:300<p>car_id:"+d.car_name+"<p>speed:"+d.speed+"</p>"
					         L.popup({className: "taxi_name"}).setLatLng(d.latlng)
	                                        				  .setContent(contant)
	                                                          .addTo(map);
					            })
					            .on("mouseout", function(d){d3.selectAll(".taxi_name").remove();})
		}
		
		function clear6(){
			$("#clock").fadeOut(800);
//			$("#clock").transition()
//		               .duration(800)
//		               .attr("width", 0)
//		               .remove()
			d3.selectAll(".taxi").remove();
//			window.clearInterval(flag_globle);
		}
//*********************************************************************************************//		
		
		//点击地图获取坐标
		function onMapclick(e){
			
			var a = e.latlng;
			list.push(a);

			console.log(a)
			L.marker(a).addTo(map).on("click",listremove)
			function listremove(e){
				this.remove();
				Removelist2(e.latlng);
//				list.pop();
				for(i = 0; i<list.length; i++){
					if(list[i] == e.latlng){
						list.splice(i,1);
						break;
					}
				}
				console.log(list2);
				console.log(list[0])
			}
			
		}
		
		function Removelist2(b){
			for(i = 0; i<list2.length; i++){
					if(list2[i][0] == b.lat && list2[i][1] == b.lng){
						list2.splice(i,1);
						break;
					}
		}}
		
//***************************************select添加option******************************************************//
		for (var i =1; i<679; i++){
			var option1 = document.createElement("option");
			var option2 = document.createElement("option");
			$(option1).text("Road" +i);
			$(option2).text("Road" +i);
			$('#se1').append(option1);
			$('#se2').append(option2);
		}
		$(".chosen-select").chosen()
		$('.l1').text("08");
		$('.l2').text("10");
		$('.l3').text("08");
		$('.l4').text("20");
		$('.l5').text("08");
		$('.l6').text("30");
		$('.f1').text("0");
		$('.f2').text("0");
		$('.f3').text("0");
//*********************************************************************************************//
		
//***************************************选择框模式******************************************************//
		//map.dragging.disable(); map.dragging.enable();
		var RS_set = [];
		var index_d = [];
		$("#rectselect").on("click", function(){
			if(reaceselect_flag){
				map.dragging.disable();
				$("#i1").removeClass("fa-hand-pointer-o").addClass("fa-hand-stop-o").attr("title", "Stop");
				$(this).css("background-color", "#DDDDDD")
				select();
				reaceselect_flag = false;
			}else{
				map.dragging.enable();
				$("#i1").removeClass("fa-hand-stop-o").addClass("fa-hand-pointer-o").attr("title", "Select");
				$(this).css("background-color", "#EFF4EF")
				reaceselect_flag = true;
				map.off("mousedown");
				map.off("mouseup");
				map.off("mousemove");
			};
			})

		function select(){
			var caldot;
			var startpoint, endpoint, rectarea;
			map.on("mousedown", function(e) {
					for(var j = 0; j<RS_set.length; j++){
						var A = "road"+(RS_set[j]-1)
						d3.select('.'+A).attr("stroke", "red")
										.attr("stroke-opacity", '0.7')
										.attr("stroke-width", '5')				
					}
					RS_set = [];
					index_d = [];
					startpoint = e.latlng;
//					console.log(startpoint);
					map.on("mousemove", function(e) {
							$(".rect").remove();
							var bounds = [];
							endpoint = e.latlng;
							bounds.push(startpoint);
							bounds.push(endpoint);
							rectarea = L.rectangle(bounds, {color: "#0D82D7", weight:1, opacity:0.5, className:"rect"}).addTo(map);
							rectarea.on("click", function(){this.remove();});// d3.selectAll(".leaflet-marker-icon").remove();});
							caldot = rectarea.getBounds();
					});
			});
		
			map.on("mouseup", function(e) {
					$(".rect").remove();
//					console.log("ok");
					map.off("mousemove");
//					for(i=0; i<road_point_list.length; i++){
//						var A = caldot.contains(road_point_list[i]);
//						if(A){
//							L.marker(road_point_list[i]).addTo(map);
//						};
//					};
					for(var i=0; i<RS_list_detial1.length; i++){

						var A = caldot.contains(RS_list_detial1[i][0]);
						var A1 = caldot.contains(RS_list_detial1[i][1]);
						if(A & A1){
							RS_set.push(i+1);
						}
					};
					for(var j = 0; j<RS_set.length; j++){
						var A = "road"+(RS_set[j]-1)
						d3.select('.'+A).data([j])
										.attr("stroke", "yellow")
										.attr("stroke-opacity", '1')
										.attr("stroke-width", '10')
										.on("click", function(d){
											d3.select(this).attr("stroke", "red")
														   .attr("stroke-opacity", '0.7')
														   .attr("stroke-width", '5')
											console.log(RS_set[d])
											index_d.push(RS_set[d]);
										})
					}
					
					caldot = 0;
			});
		};
//***************************************选择框模式******************************************************//

//***************************************根据所选道路画表******************************************************//
		
		$("#fa-chart").on('click', draw_flow_speed);
			
		function draw_flow_speed(){
			var week = ["Wednesday", "Thursday", "Friday" , "Saturday", "Sunday", "Monday", "Tuesday"]
			var RS_set1 = $("#datepicker2").val()
			RS_set1 = parseInt(RS_set1.substring(8, RS_set1.length))
			$("#we").text(week[(RS_set1-1)%7])
			for(var i = 0; i<index_d.length; i++){
				RS_set.splice(RS_set.indexOf(index_d[i]), 1)
			}
			var datas, data_speed;
			var datas1 = [], data_speed1 = [];
			var data = {"x":RS_set, "y":RS_set1}
			var dom = [];
			var leng;
			var jsondata = JSON.stringify(data)
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/post_view2.0_5/",
			  	success: function(result){
			  			datas = result.data[0];
			  			data_speed = result.data[1];
			  			console.log(result.data)
			  			if(RS_set.length>10){
			  				leng = 10;
			  			}else{
			  				leng = RS_set.length;
			  			}
						for(var i = 0; i<leng; i++){
							dom.push("路"+RS_set[i]);
						};
//						RS_set = [];
						chart_produce(datas,dom,data_speed);
		  		},
		  				dataType: 'JSON',
				});
				function chart_produce(datas,dom,data_speed){
					for(var i = 0; i<datas.length; i++){
						for(var j = 0; j<datas[i].length; j++){
							datas1.push(datas[i][j]);
							data_speed1.push(data_speed[i][j]);
						};
					};
//					console.log(data_speed1)
					drawrect(datas1,dom,data_speed1);	
				};
		}
		

//***************************************根据所选道路画表******************************************************//
		
//*********************************************画出租车轨迹，动画展示************************************************//		
		function draw_circle(A){
//			console.log(A)
//			.attr("fill-opacity", 0).attr("stroke-opacity", 0)
			d3.selectAll(".circle").transition()
			              		   .duration(2000)
			              		   .ease(d3.easeBackOut)
			              		   .attr("stroke-opacity", 0)
//			              		   .attr("fill-opacity", 0)
//			              		   .remove()
			
			d3.selectAll(".taxi").transition()
			              		  .duration(30)
			              		  .ease(d3.easeBackOut)
			              		  .remove()
			if(count == A.length-1){
				L.circle(A[count].latlng,{
		        	color: 'black',//颜色
		            fillColor: 'black',
		            fillOpacity:1,//透明度
		            weight: 5,
		            radius: 60,
		            className: 'circle'
		        	}).addTo(map)
			}else{
				L.circle(A[count].latlng,{
		        	color: '#F2701D',//颜色
		            fillColor: '#F2701D',
		            fillOpacity:1,//透明度
		            weight: 2,
		            radius: 60,
		            className: 'circle'
		        	}).addTo(map)
			}
		        	count += 1
		        	if(count > (A.length - 1)){
		        		xxx_f = true;
		        		xxx = 0;
						$("#i7").removeClass("fa-pause").addClass("fa-play").attr("title", "play").css("left", "3.5px");
		        		window.clearInterval(flag);
		        	}
		}
		
		var xxx, xxx_f = true, yyy, aaa, bbb, ccc;
		$("#taxi_switch").on("click",function(){
			d3.selectAll(".taxi").remove();
			d3.selectAll(".circle").remove();
			d3.selectAll(".nowclick").remove();
			clear1();
			clear3();
			clear4();
			clear5();
			clear6();
			aaa = $("#datepicker3").val(), bbb = $("#va4").val(), ccc = $("#va5").val();
			var b11 = parseInt(bbb.substring(0,2)), b12 = parseInt(bbb.substring(3,5));
			var c11 = parseInt(ccc.substring(0,2)), c12 = parseInt(ccc.substring(3,5));
			bbb = b11 * 60 + b12;
			ccc = c11 * 60 + c12;
			aaa = parseInt(aaa.substring(8, aaa.length))
			var data = {"x":aaa,"y":bbb}
			var jsondata = JSON.stringify(data)
			yyy = 0;
			xxx_f = true;
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/post_view2.0_6/",
			  	success: function(result){
			  		yyy = result.data;
			  		initial(yyy);
		  		},
		  		dataType: 'JSON',
			});
		})
		function initial(A){
			
			count = 1;
			for(i = 0; i<A.length; i++){
					  			L.circle(A[i].latlng,{
					        	color: 'red',//颜色
					            fillColor: 'red',
					            fillOpacity:1,//透明度
					            weight: 5,
					            radius: 30,
					            className: 'taxi'
					        	}).addTo(map)
//					        	var pulsingIcon = L.icon.pulse({iconSize:[3,3],color:'red', extclassName:'taxi'});
//								var marker = L.marker(A[i].latlng,{icon: pulsingIcon}).addTo(map);
					};
					var dat1 = d3.selectAll(".taxi").data(A)
					            .on("mouseover", function(d){
					            	var contant = "<p>car_nb:"+A.length+"<p>car_id:"+d.car_name+"<p>speed:"+d.speed+"</p>"
					            	L.popup({className: "taxi_name"}).setLatLng(d.latlng)
	                                        .setContent(contant)
	                                        .addTo(map);
					            })
					            .on("mouseout", function(d){d3.selectAll(".taxi_name").remove();})
					            .on("click", function(d){
					            	console.log(d)
									var pulsingIcon = L.icon.pulse({iconSize:[10,10],color:'red', fillColor:'black', extclassName:'nowclick'});
									var marker = L.marker(d.latlng,{icon: pulsingIcon}).addTo(map);
					            	$("#bar").fadeIn(1000)
//					            	xxx = 0;
					            	var data = {"x":d.car_name,"y":bbb, "z": ccc, "k": aaa}
									var jsondata = JSON.stringify(data)
									$.ajax({
											type: 'post',
											data: jsondata,
											url: "http://127.0.0.1:8000/admin/post_view2.0_7/",
											success: function(result){
												xxx = result.data;
											},
											dataType: 'JSON',
									});					
					            });
		}
		
		$("#circle-contral1").on("click", function(){
			console.log(xxx);
			if(xxx_f){
				xxx_f = false;
				$("#i7").removeClass("fa-play").addClass("fa-pause").attr("title", "pause").css("left", "0px");
				flag = self.setInterval(draw_circle, 100, xxx)
			}else{
				xxx_f = true;
				$("#i7").removeClass("fa-pause").addClass("fa-play").attr("title", "play").css("left", "3.5px");
				window.clearInterval(flag);
			}
		})
		$("#circle-contral").on("mousedown", function(){
									$("#i6").css("color", "red");
								})
							.on("mouseup", function(){
									$("#i6").css("color", "black");
								})
							.on("click", function(){
									window.clearInterval(flag);
									d3.selectAll(".circle").remove()
									d3.select(".nowclick").remove()
									$("#i7").removeClass("fa-pause").addClass("fa-play").attr("title", "play").css("left", "3.5px");
									initial(yyy);
									count = 1;
									xxx = 0;
								})
		function clear2(){
			d3.selectAll(".taxi").remove();
			d3.selectAll(".circle").remove();
			d3.selectAll(".nowclick").remove();
			$("#bar").fadeOut(1000)
		}

//*********************************************画出租车轨迹，动画展示************************************************//		
//*******************************************选择路段显示出租车**************************************************// 
		var c_last;
     	$("#c").on('click',function(){
     		d3.selectAll(".temp").remove();
//   		d3.selectAll(".temp1").remove();
     		clear2();
     		clear3();
     		clear4();
     		clear6();
			var a = $("#va1").val();
			var b = $("#datepicker").val();
			var c = $("#se1").val();
			b = parseInt(b.substring(8, b.length));
			c = parseInt(c.substring(4, c.length));
			var a1 = parseInt(a.substring(0,2));
			var a2 = parseInt(a.substring(3,5));
			a = a1 * 60 + a2;
			console.log(a, b, c)
			var data = {"x": b, "y": c, "z": a}
			var jsondata = JSON.stringify(data)
				$.ajax({
				  	type: 'post',
				  	data: jsondata,
				  	url: "http://127.0.0.1:8000/admin/post_view2.0_1/",
				  	success: function(result){
				  		console.log(result.data)
				  		var aa = result.data.road
				  		if(c != c_last){
				  			d3.selectAll(".temp1").remove();
					  		if (aa.length == 8){
					  			L.polyline([[aa[0], aa[1]], [aa[2], aa[3]], [aa[4], aa[5]], [aa[6], aa[7]]], {color: 'red', weight: 8, opacity: 1, className: 'temp1'})
					  	     	 .addTo(map);
					  		}else if(aa.length == 6){
					  			L.polyline([[aa[0], aa[1]], [aa[2], aa[3]], [aa[4], aa[5]]], {color: 'red', weight: 8, opacity: 1, className: 'temp1'})
					  	     	 .addTo(map);
					  		}else if(aa.length == 4){
					  			L.polyline([[aa[0], aa[1]], [aa[2], aa[3]]], {color: 'red', weight: 8, opacity: 1, className: 'temp1'})
					  	     	 .addTo(map);
					  		}else{
					  			alert("你选择的路有误！请重新选择！")
					  		}
				  		}
				  		c_last = c;
				  		if (result.data.detail.length == 0){
				  			alert("此路段此时刻无出租车！")
				  		}else{
				  			for(i = 0; i<result.data.detail.length; i++){
					  			L.circle(result.data.detail[i].latlng,{
					        	color: 'black',//颜色
					            fillColor: 'black',
					            fillOpacity:1,//透明度
					            weight: 8,
					            radius: 16,
					            className: 'temp'
					        	}).addTo(map)
				  			}
				  		}
						
					var dat = d3.selectAll(".temp").data(result.data.detail)
					            .on("mouseover", function(d){
					            	var contant = "<p>car_nb:"+result.data.taxi_number+"<p>car_id:"+d.car_no+"<p>speed:"+d.speed+"</p>"
					            	L.popup({className: "ha"}).setLatLng(d.latlng)
	                                        .setContent(contant)
	                                        .addTo(map);
					            })
					            .on("mouseout", function(d){d3.selectAll(".ha").remove();})
			  			},
			  		dataType: 'JSON',
					});
			})
     	function clear1(){
     		d3.selectAll(".temp").remove();
     		d3.selectAll(".temp1").remove();
     	}
   
     	var c1 = d3.rgb(255,0,0);    //红色  
		var c2 = d3.rgb(247,255,0);    //绿色  
			   
		var compute = d3.interpolate(c2,c1); 
		var linear = d3.scaleLinear()  
			           .domain([0,30])  
			           .range([0,1]);
			           
		$("#color").on('click',function(){
			var data = {"x":132.3242432,"y":12.32356622}
			var jsondata = JSON.stringify(data)
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/post_view2.0_2/",
			  	success: function(result){
			  		var res_carflow = result.data[result.data.length-1]
			  		var dt = [];
			  		for(var i = 0; i<result.data.length-1; i++){
			  			dt.push(result.data[i].R);
			  		}
			  		for(var j = 0; j<dt.length; j++){
			  			if(dt[j].length == 4){
			  				polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  							.addTo(map);
			  			}else if(dt[j].length == 3){
			  				polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  							.addTo(map);
			  			}else{
			  				polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  							.addTo(map);
			  					}
			  				}
		  				},
		  				dataType: 'JSON',
				});
			});
		
		//日期插件*******************************
		 $( "#datepicker1" ).datepicker({
		    showOtherMonths: true,
		    selectOtherMonths: true,
		    defaultDate: "-4y -3m -10d",
		    dateFormat: "yy-mm-dd",
  		});
  		$( "#datepicker" ).datepicker({
		    showOtherMonths: true,
		    selectOtherMonths: true,
		    defaultDate: "-4y -3m -10d",
		    dateFormat: "yy-mm-dd",
  		});
  		$( "#datepicker2" ).datepicker({
		    showOtherMonths: true,
		    selectOtherMonths: true,
		    defaultDate: "-4y -3m -10d",
		    dateFormat: "yy-mm-dd",
  		});
  		$( "#datepicker3" ).datepicker({
		    showOtherMonths: true,
		    selectOtherMonths: true,
		    defaultDate: "-4y -3m -10d",
		    dateFormat: "yy-mm-dd",
  		});
  		$( "#datepicker4" ).datepicker({
		    showOtherMonths: true,
		    selectOtherMonths: true,
		    defaultDate: "-4y -2m -10d",
		    dateFormat: "yy-mm-dd",
  		});
  		//**************************************
  		var d1, tm;
  		var co = true;
  		var flow_set = []
		var road = [];
		var road_fist = []; 
  		$(".reloadbt").on("click", function(){
  			clear1();
  			clear2();
  			clear4();
  			clear5();
  			clear6();
  			var dt = $("#datepicker1").val();
  			var a = dt.substring(5,7)
  			var b = dt.substring(8,10)
  			var c = dt.substring(2,4)
  			var d = a;
		  	a = a + b;
		  	d1 = c + '/' + d + '/' + b;
		  	Read_data_draw(a, d1);
  		});
  		$("#icon1").on("click", function(){
  			var dt = $("#datepicker1").val();
  			var a = dt.substring(5,7)
  			var b = dt.substring(8,10)
  			var c = dt.substring(2,4)
  			var e = dt.substring(0,8)
  			var d = a;
		  	a = a + b;
		  	if(b == "01"){
		  		alert("No Yesterday!");
		  	}else{
		  		a = parseInt(a) -1;
		  		var aa = parseInt(b)-1
		  		if(aa<10){aa = "0"+ aa}else{aa = aa;};
		  		d1 = c + '/' + d + '/' + aa;
		  		aa = e + aa
		  		console.log(aa)
		  		$("#datepicker1").val(aa);
		  		Read_data_draw(a, d1);
		  	}
  		});
  		
  		$("#icon2").on("click", function(){
  			var dt = $("#datepicker1").val();
  			var a = dt.substring(5,7)
  			var b = dt.substring(8,10)
  			var c = dt.substring(2,4)
  			var e = dt.substring(0,8)
  			var d = a;
		  	a = a + b;
		  	if(b == "31"){
		  		alert("No Tomorrow!");
		  	}else{
		  		a = parseInt(a) +1;
		  		var aa = parseInt(b)+1
		  		if(aa<10){aa = "0"+ aa}else{aa = aa;};
		  		d1 = c + '/' + d + '/' + aa;
		  		aa = e + aa
		  		console.log(aa)
		  		$("#datepicker1").val(aa);
		  		Read_data_draw(a, d1);
		  	}
  		});
  		
  		
  		function Read_data_draw(a, d1){
					$.playBar.restTime(1000*tm-1);
				  	Stop();
				  	d3.selectAll(".road").remove();
				  	flow_set = [];
					road = [];
	  				$("#map").loading({});
		  			var tm1 = $("#va2").val(), tm2 = $("#va3").val();
		  			var tm11 = parseInt(tm1.substring(0,2)), tm12 = parseInt(tm1.substring(3,5));
					var tm21 = parseInt(tm2.substring(0,2)), tm22 = parseInt(tm2.substring(3,5));
					tm1 = tm11 * 60 + tm12;
					tm2 = tm21 * 60 + tm22;
					tm = tm2 -tm1;
					var data = {"x":a, "y":tm1, "z":tm2}
					var jsondata = JSON.stringify(data)
						$.ajax({
						  	type: 'post',
						  	data: jsondata,
						  	url: "http://127.0.0.1:8000/admin/post_view2.0_3/",
						  	success: function(result){
//						  		console.log(result)
						  		if(result.code == 0){
						  			removeLoading('loadingName');
						  			$("#toolbar").fadeIn(500);
						  			$("#pop2").html(d1 + '<br/>' + "00:00")
						  		}
						  		flow_set = result.data;
//						  		console.log(flow_set)
						  		road_fist = result.data[result.data.length - 1];
						  		draw_road_fist(road_fist);
						  		road = d3.selectAll(".road")
					  		},
					  		dataType: 'JSON',
							});
							$.playBar.addBar($('.test'),1000*tm-1);//第一个参数是需要显示播放器的容器，第二个参数为时间，单位毫秒
							$.playBar.changeBarColor("#72dfff");//设置进度条颜色
							$.playBar.Stop();
							$("#toolbar").css("top", $("#map").height()-28)
							$("#pop").css("top", $("#map").height()-56)
							$(".TimeBall").mouseover(function(){
														$("#pop").show();
													})
										  .mouseout(function(){
														$("#pop").hide();
													})
										  .mousemove(function(){
										  				var p = $(".BarBeginTime").html();
													  	var b = p.substring(0, 2);
														var c = p.substring(3, 5);
														var d = parseInt(b) * 60 + parseInt(c);
														var a = road.data(flow_set[d]).attr("stroke", function(d, i){var t = compute(linear(d)); return t});
										  })
							
					if(!action){
						action = true;
						$("#i3").removeClass("fa-pause").addClass("fa-play").attr("title", "Play").css("left", "1.5px");
					};
//					var left = $(".TimeBall").offset().left-25;
//					left = left + "px";
					$("#pop").css("left", "597px");
					var p = $(".BarBeginTime").html();
					$("#pop2").html(d1 + '<br/>' + p)
  		}
  		
  		//*******************************************设置播放器**************************************************//	
		$("#icon").on("click", function(){
								if(action){
									$.playBar.Begin();
									fg = setInterval(donghua, 1000);
									action = false;
									$("#i3").removeClass("fa-play").addClass("fa-pause").attr("title", "Pause").css("left", "0px");
									
								}else{
									$.playBar.Stop();
									Stop();
									action = true;
									$("#i3").removeClass("fa-pause").addClass("fa-play").attr("title", "Play").css("left", "1.5px");
								}
							});
  		
  		function draw_road_fist(A){
  			var res_carflow = A[A.length-1]
  			var compute = d3.interpolate(c2,c1); 
			var linear = d3.scaleLinear()  
				           .domain([0,d3.max(res_carflow)])  
				           .range([0,1]);
			var dt = [];
			for(var i = 0; i<A.length-1; i++){
			  		dt.push(A[i].R);
			  	}
			for(var j = 0; j<dt.length; j++){
			  		if(dt[j].length == 4){
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  					    .addTo(map);
			  		}else if(dt[j].length == 3){
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  						.addTo(map);
			  		}else{
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  						.addTo(map);
			  				}
			  			}
  		}
  		
  		function clear3(){
  			Stop();
			d3.selectAll(".road").remove();
			flow_set = [];
			road = [];
			$("#toolbar").fadeOut(500);
  		}
  		
//*******************************************显示所有路段和路口节点**************************************************//	
		var show_R_flag = true;
		$("#show_R").on("click", function(){
			clear1();
			clear2();
			clear3();
			clear4();
			clear6();
			if(show_R_flag){
				show_R_flag = false;
				var dt = [];
				let c111 = d3.rgb(255,0,0);
				let c222 = d3.rgb(198,250,10);
				let compute = d3.interpolate(c111,c222); 
				let linear = d3.scaleLinear()  
					           .domain([0,678])  
					           .range([0,1]);
				for(let i = 0; i<RS.length; i++){
				  		dt.push(RS[i].R);
				  	}
	//			console.log(dt)
				for(let j = 0; j<dt.length; j++){
				  		if(dt[j].length == 4){
				  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: 'red', opacity: 1, weight: 5, className: 'road'+j})
				  					    .addTo(map);
				  		}else if(dt[j].length == 3){
				  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: 'red', opacity: 1, weight: 5, className: 'road'+j})
				  						.addTo(map);
				  		}else{
				  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: 'red', opacity: 1, weight: 6, className: 'road'+j})
				  						.addTo(map);
				  				}
				  			}
				for (let i=0; i<road_point.length; i++){
					L.circle(road_point[i],{
				        	color: 'black',//颜色
				            fillColor: 'black',
				            fillOpacity: 1,//透明度
				            opacity: 1,
				            weight: 5,
				            radius: 20,
				            className: 'circle0'
				        	}).addTo(map)
				};
				}else{
					for(let i = 0; i<678; i++ ){
						var aaaa = "road"+i;
						d3.select("."+aaaa).remove();
					}
					d3.selectAll(".circle0").remove();
					show_R_flag = true;
				}
		});
		
		function clear5(){
			for(let i = 0; i<678; i++ ){
						d3.select(".road"+i).remove();
					}
					d3.selectAll(".circle0").remove();
			honeySwitch.showOff("#show_R")
			show_R_flag = true;
		}

//*********************************************************************************************//				
  		function donghua(){
  					var left = $(".TimeBall").offset().left-25;
  					left = left + "px";
  					$("#pop").css("left",left);
					var p = $(".BarBeginTime").html();
					var b = p.substring(0, 2);
					var c = p.substring(3, 5);
					var d = parseInt(b) * 60 + parseInt(c);
					console.log(d)
					$("#pop2").html(d1 + '<br/>' + p)
					var a = road.data(flow_set[d]).attr("stroke", function(d, i){var t = compute(linear(d)); return t});
				}
  		function Stop(){
			window.clearInterval(fg);
		}
		
		var wi = 800;
		var he = 292, he1 = he+25
		var y_st = 0;
		var y_ed = 5;
		$("#left_board").height(he1);
		$("#right_board").height(he1);
		
		
//*******************************************chart3流量速度等表格**************************************************//
		
		var don = ["路 0", "路 1", "路 2", "路 3", "路 4", "路 5", "路 6", "路 7", "路 8", "路 9"];
		var don_x = []
		for(let i = 0; i<25; i++){
			don_x.push(i+'H')
		}
		var padding = {top: 30, right: 50, bottom: 40, left: 40};
		var xAxisWidth = wi-padding.left-padding.right;
		var yAxisWidth = he-padding.bottom-padding.top;
		
		
		var svg = d3.select("#chart3").append("svg")
					.attr("width", wi)
					.attr("height", he)
					.attr("class", "svg1")
		
		var yScale = d3.scaleBand()
		               .domain(don)
		               .range([yAxisWidth, 0])
		               
		
		var xScale = d3.scaleLinear()
		               .domain([0, 24])
		               .range([0, xAxisWidth])
		               
		var xAxis = d3.axisBottom(xScale)
		              .ticks(25)
		              
		var yAxis = d3.axisLeft(yScale)
					  .ticks(22);
		
		var gX = svg.append("g")
		            .attr("transform","translate("+padding.left+","+(he-padding.bottom)+")")
		            .attr("class","gx")
		            .call(xAxis)
		
		var gY = svg.append("g")
		            .attr("transform","translate("+padding.left+","+(he-yAxisWidth-padding.bottom)+")")
		            .attr("class", "gy")
		            .call(yAxis);
		
//		
//		gY.selectAll("text")
//		  .attr('transform', 'rotate(-30)')
//*******************************************画分割线**************************************************//
		function draw_segline(don, H){
			var base_y = padding.top+0.5;
			for(var i = 0; i<don.length; i++){
				var line = d3.select(".svg1").append("line")
											 .attr("x1", "40")
											 .attr("y1", base_y+ i*H)
											 .attr("x2", xAxisWidth+40)
											 .attr("y2", base_y+ i*H)
											 .attr("stroke", "gray")
											 .attr("class", "line1")
			};
			var line1 = d3.select(".svg1").append("line")
											 .attr("x1", wi-padding.right)
											 .attr("y1", base_y)
											 .attr("x2", wi-padding.right)
											 .attr("y2", he - padding.bottom)
											 .attr("stroke", "gray")
											 .attr("class", "line2")
		};
//*********************************************************************************************//

//*******************************************画方块**************************************************//
		function drawrect(dataset,dom, data_speed){
			
			d3.selectAll("rect").remove();
			d3.select(".gx").remove();
			d3.select(".gy").remove();
			d3.select(".tooltip").remove();
			d3.selectAll(".rect1").remove();
			d3.selectAll("line").remove();
//			d3.selectAll(".line2").remove();
			d3.selectAll(".text1").remove();
			d3.select(".goback").remove();
			d3.select(".divshow").remove();
			
			var c3 = d3.rgb(57,229,28), c4 = d3.rgb(229,62,28);
			var max_speed = d3.max(data_speed), min_speed = d3.min(data_speed);
			var compute1 = d3.interpolate(c2,c1); 
			var linear1 = d3.scaleLinear()  
				           .domain([max_speed, min_speed])  
				           .range([0,1]);
			
			var yScale = d3.scaleBand()
			               .domain(dom)
			               .range([yAxisWidth, 0])
			               
			var yAxis = d3.axisLeft(yScale)
					  .ticks(12);
					  
			var xScale = d3.scaleLinear()
		               .domain([0, 24])
		               .range([0, xAxisWidth])
		               
			var xAxis = d3.axisBottom(xScale)
			              .ticks(25)
			
			var gY = svg.append("g")
			            .attr("transform","translate("+padding.left+","+(he-yAxisWidth-padding.bottom)+")")
			            .attr("class", "gy")
			gY.call(yAxis);
			var gX = svg.append("g")
		            .attr("transform","translate("+padding.left+","+(he-padding.bottom)+")")
		            .attr("class","gx")
			gX.call(xAxis);
			
			var rectHeight = yScale.step(), rectWidth = xScale(1) - xScale(0); //矩形高度
			draw_segline(dom, rectHeight);
			
			
			var min = d3.min(dataset), max = d3.max(dataset);
			var dscale = d3.scaleLinear()
			               .domain([min,max])
			               .range([0, rectWidth])
			var g = svg.append("g");
			var rect = g.selectAll("rect")
						  .data(dataset)
						  .enter()
						  .append("rect")
						  .attr("fill", function(d,i){
						  	return compute1(linear1(data_speed[i]))
						  })
						  .attr("x", function(d,j){
						  		return padding.left+0.5 
						  })
						  .attr("y", function(d, i){return padding.top+0.5 + rectHeight * (dom.length-1) })
						  .attr("height", rectHeight)
						  .attr("width", function(d){
						  	return dscale(d)
						  })
						  .attr("class", "rect1");
						  
			var rectTran = rect.transition()
		                   .delay(function(d,i){return i*10})
		                   .duration(200)
		                   .attr("y", function(d,i){
						  	return (padding.top+0.5 + rectHeight * (dom.length-1)) - parseInt(i/24)*rectHeight
						  })
		                   .attr("x", function(d,j){
						  		return padding.left+0.5 + (j%24)*rectWidth
						  })

			recthaha();
						   
	        /***********************************************显示信息更友善***********************************************/
	       	var flow = [];
	       	for(var i = 0; i<24; i++){
	       		flow[i] = [];
	       		for(var j = dom.length-1; j >= 0; j--){
		       		flow[i].push({roadname: dom[j],
	            		       value:dataset[24*j+i],
	            		       speed:data_speed[24*j+i]
	            		     })
	       		};
	       	};
			var tooltip = d3.select("#chart3")
                            .append("div")
                            .attr("class","tooltip")
                            .style("opacity",0);
            var title = tooltip.append("div")
                               .attr("class", "title");
            var des = tooltip.selectAll(".des")
                             .data(dom)
                             .enter()
                             .append("div")
                             .attr("class", "des");
            var desText = des.append("div")
                              .attr("class", "desText");
            
            var vLine = svg.append("line")
                           .attr("class", "focusLine")
                           .attr("stroke","black")
                           .attr("stroke-dasharray",5.5)//设置虚线
                           .style("display", "none");
            var H_tool = (dom.length+1)*30 + 9;
            var A_last;
          
			svg.append("rect")
			   .attr("class", "overlay")
			   .attr("x", padding.left)
			   .attr("y", padding.top)
			   .attr("width", xAxisWidth)
			   .attr("height", yAxisWidth)
			   .on("mouseover", function(){
			   	  tooltip.attr("height", H_tool)
			   	         .style("opacity", 1.0);
			   	   vLine.style("display", null);
			   })
			   .on("mouseout", function(){
			   	  tooltip.style("opacity", 0.0);
			   	  vLine.style("display", "none");
			   	  d3.select('.'+A_last).attr("stroke", "yellow")
									   .attr("stroke-opacity", '1')
									   .attr("stroke-width", '10')
			   	  
			   })
			   .on("mousemove", mousemove)
			   .on("click", change);
			 
			function change(){
				var data2 = dataset;
				var doma1 = dom;
				var mouseX1 = d3.mouse(this)[0] - padding.left;
            	var mouseY1 = d3.mouse(this)[1] - padding.top;
            	var x00 = xScale.invert(mouseX1);
            	var y00 = mouseY1;
            	var y000 = yAxisWidth/doma1.length
            	var y010 = Math.floor(y00/y000), y020 = doma1[doma1.length-y010-1];
            	x00 = Math.floor(x00);
            	var RS_set11 = $("#datepicker2").val()
				RS_set11 = parseInt(RS_set11.substring(8, RS_set11.length))
            	console.log(y020, x00, RS_set11)
            	y020 = parseInt(y020.substring(1, y020.length))
            	let data = {"x":y020, "y":x00, 'z': RS_set11}
				let jsondata = JSON.stringify(data)
				$.ajax({
				  	type: 'post',
				  	data: jsondata,
				  	url: "http://127.0.0.1:8000/admin/post_view2.0_8/",
				  	success: function(result){
				 		var sf = result.data;
				 		draw_children(sf, y020, x00);
			  		},
			  				dataType: 'JSON',
					});
			}
			
			function draw_children(A, B, C){
				d3.selectAll("rect").remove();
				d3.select(".gx").remove();
				d3.select(".gy").remove();
				d3.select(".focusLine").remove();
				d3.select(".tooltip").remove();
				d3.selectAll(".rect1").remove();
				d3.selectAll(".line1").remove();
				d3.selectAll(".line2").remove();
				d3.selectAll(".text1").remove();
				d3.select(".goback").remove();
				d3.select(".divshow").remove();
				C = C + 1;
				
				var max_speed1 = d3.max(A[1]), min_speed1 = d3.min(A[1])
				var linear2 = d3.scaleLinear()  
				           .domain([max_speed1, min_speed1])  
				           .range([0,1]);
				var yScale = d3.scaleBand()
				               .domain(["10m", "20m", "30m", "40m", "50m", "60m"])
				               .range([yAxisWidth, 0])
				               .padding(0.2);
				               
				var yAxis = d3.axisLeft(yScale)
						  .ticks(6);
						  
				var xScale = d3.scaleLinear()
			               .domain([0, d3.max(A[0])])
			               .range([0, xAxisWidth])
			               
				var xAxis = d3.axisBottom(xScale)
				
				var gY = svg.append("g")
				            .attr("transform","translate("+padding.left+","+(he-yAxisWidth-padding.bottom)+")")
				            .attr("class", "gy")
				gY.call(yAxis);
				var gX = svg.append("g")
			            .attr("transform","translate("+padding.left+","+(he-padding.bottom)+")")
			            .attr("class","gx")
				gX.call(xAxis);
				
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("fill", c1)
							   .attr("x", padding.left+5)
							   .attr("y", padding.top+5)
							   .text("Min")
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("fill", c1)
							   .attr("x", wi-padding.right-30)
							   .attr("y", he-padding.bottom-5)
							   .text("Flow")
				
				var rectHeight = yScale.step()

				var min = d3.min(A[0]), max = d3.max(A[0]);
				var dscale = d3.scaleLinear()
				               .domain([0,max])
				               .range([0, xAxisWidth-40])
				var g = svg.append("g");
				var rect1 = g.selectAll("rect")
							  .data(A[0])
							  .enter()
							  .append("rect")
							  .attr("fill", function(d,i){
							  	return compute1(linear2(A[1][i]))
							  })
							  .attr("y", function(d, i){return he-padding.bottom-rectHeight})
							  .attr("x", padding.left + 0.5)
							  .attr("height", 25)
							  .attr("width", function(d,i){return 1})
							  .attr("class", "rect1")
							  .on("mouseover", function(d, i){
							  	flowdiv.html("<strong>"+d+"</strong>");
							  	speeddiv.html("<strong>"+A[1][i]+"</strong>");
							  	d3.select(this).style("cursor", "pointer")
							  })
				recthaha();
				var rectTran1 = rect1.transition()
		                   .delay(function(d,i){return i*25})
		                   .duration(1000)
		                   .attr("y", function(d,i){
						  	return he-padding.bottom-rectHeight*(i+1)
						  })
		                   .attr("width", function(d,i){return dscale(d)})
		        var divshow = "<div class = 'divshow'></div>";
		        var goback = "<div class = 'goback'></div>";
				$("#chart3").append(divshow)
				$("#chart3").append(goback)
				d3.select(".goback").style("cursor", "pointer")
				d3.select(".goback").append("i")
									.attr("class", "fa fa-share fa-stack-2x")
									.style("margin-top", "3px")
				var title1 = d3.select(".divshow").append("div")
												  .attr("class", "title1")
				title1.html("<strong>路"+B+"("+ C +"H)</strong>")
				var flowdiv = d3.select(".divshow").append("div")
												  .attr("class", "flowdiv")
				var speeddiv = d3.select(".divshow").append("div")
												  .attr("class", "speeddiv")
												  
				$(".goback").on("click", function(){
					d3.select(".goback").remove();
					d3.select(".divshow").remove();
					d3.select('.'+A_last).attr("stroke", "yellow")
									   .attr("stroke-opacity", '1')
									   .attr("stroke-width", '10')
					var rectTran2 = rect1.transition()
		                   .delay(function(d,i){return i*25})
		                   .duration(1000)
		                   .attr("y", function(d, i){return he-padding.bottom-rectHeight})
		                   .attr("width", function(d,i){return 1})
		                   .remove()
					draw_flow_speed();
				})
		                   
		        
			}
			
			function mousemove(){
				var h1 = $("#map").height(), h2 = $("#gongjulan").height(), h3 = H_tool;
				var data1 = dataset;
				var doma = dom;
				var mouseX = d3.mouse(this)[0] - padding.left;
            	var mouseY = d3.mouse(this)[1] - padding.top;
            	var x0 = xScale.invert( mouseX );
            	var y0 = mouseY;
            	var y00 = yAxisWidth/doma.length
            	var y01 = Math.floor(y0/y00), y02 = doma[doma.length-y01-1];
            	x0 = Math.floor(x0);
            	hightlight(y02);
//          	console.log(y02, x0)
            	var x1;
            	if(x0<9){x1 = "0"+(x0+1);}else{x1 = x0+1};
            	var data = [];
            	for(var i = 0; i<parseInt((data1.length)/24); i++){
            		data.push(i*24+x0)
            	}
            	title.html("<strong>F&S("+ x1 +"H)</strong>")
            	desText.html(function(d,i){
            		var x11;
            		if(flow[x0][i].value < 10){x11 = "00"+flow[x0][i].value }else if(flow[x0][i].value < 100){x11 = "0"+flow[x0][i].value}else(x11 = flow[x0][i].value)
            		return flow[x0][i].roadname + "　" + "<strong>"+ x11 +"(F)</strong>"+ "　" + "<strong>"+ flow[x0][i].speed +"(S)</strong>"
            	});
            	var top_d;
            	if((d3.event.pageY-h1+$(".tooltip").height()) >= $("#chart3").height()-5){
            		top_d = $("#chart3").height()-$(".tooltip").height()-10;
            	}else{
            		top_d = d3.event.pageY-h1;
            	}
            	tooltip.style("left", (d3.event.pageX+10) + "px")
            	       .style("top", top_d + "px");
            	       
            	var vlx = xScale(x0+0.5) + padding.left;
            	
            	vLine.attr("x1", vlx)
            	     .attr("y1", padding.top)
            	     .attr("x2", vlx)
            	     .attr("y2", he-padding.bottom);
			};
			function hightlight(A){
				console.log(A)
				A = A.substring(1,A.length);
				A = 'road'+(parseInt(A)-1)
				if(A_last == A){
					d3.select('.'+A).attr("stroke", "black")
									.attr("stroke-opacity", '1')
									.attr("stroke-width", '15')
				}else{
					d3.select('.'+A).attr("stroke", "black")
									.attr("stroke-opacity", '1')
									.attr("stroke-width", '15')
					d3.select('.'+A_last).attr("stroke", "yellow")
									.attr("stroke-opacity", '1')
									.attr("stroke-width", '10')
				}
				
				A_last = A;
			}
			function recthaha(){
				var defs = svg.append("defs");
				var linearGradient = defs.append("linearGradient")
										 .attr("id", "linearColor")
										 .attr("x1", "0%")
										 .attr("y1", "0%")
										 .attr("x2", "0%")
										 .attr("y2", "100%")
				var stop1 = linearGradient.append("stop")
										  .attr("offset", "0%")
										  .style("stop-color", c2.toString());
				var stop2 = linearGradient.append("stop")
										  .attr("offset", "100%")
										  .style("stop-color", c1.toString());
										  
				var colorRect = svg.append("rect")
								   .attr("x", 760)
								   .attr("y", 140)
								   .attr("width", 20)
								   .attr("height", 100)
								   .style("fill", "url(#" + linearGradient.attr("id")+")")
								   .attr("class", "rect11")
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("fill", c2)
							   .attr("x", 765)
							   .attr("y", 135)
							   .text("F")
							   
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("fill", c1)
							   .attr("x", 765)
							   .attr("y", 255)
							   .text("S")
				}
		};
//*******************************************画方块**************************************************//
//*******************************************热力图**************************************************//
		$(".prediction").on("click", function(){
//				let data = {"x":"0101", "y":330, "z":80}
				clear1();
				clear2();
				clear3();
				clear4();
				clear5();
				clear6();
				let s1 = $("#datepicker4").val(), s2 = $("#va6").val()
				s1 = parseInt(s1.substring(8, s1.length));
				var s21 = parseInt(s2.substring(0,2)), s22 = parseInt(s2.substring(3,5));
				s2 = s21 * 60 + s22;
				var adf, adf1, zzzzz, yyyyy, zzzzz_set = [], yyyyy_set = [], zzzzz_set1 = [], yyyyy_set1 = [], zzzzz_set2 = [], zzzzz_set_last = [], yyyyy_set2 = [], yyyyy_set_last = [], datadetial = [];
				if((s22-10)<0){
					adf = 50 + s12
					$('.l4').text(adf);
					adf1 = s21-1
					if(adf1<10){
						$('.l3').text("0"+adf1);
					}else{
						$('.l3').text(adf1);
					}
				}else{
						adf = s22-10
						if(adf<10){
							$('.l4').text("0"+adf);
						}else{
							$('.l4').text(adf);
						}
						adf1 = s21
						if(adf1<10){
							$('.l3').text("0"+adf1);
						}else{
							$('.l3').text(adf1);
						}
				}
				if((s22-20)<0){
					adf = 40 + s12
					$('.l2').text(adf);
					adf1 = s21-1
					if(adf1<10){
						$('.l1').text("0"+adf1);
					}else{
						$('.l1').text(adf1);
					}
				}else{
					adf = s22-20
					if(adf<10){
						$('.l2').text("0"+adf);
					}else{
						$('.l2').text(adf);
					}
					adf1 = s21
					if(adf1<10){
						$('.l1').text("0"+adf1);
					}else{
						$('.l1').text(adf1);
					}
				}
				if(s21<10){
					$('.l5').text("0"+s21);
				}else{
					$('.l5').text(s21);
				}
				if(s22<10){
					$('.l6').text("0"+s22);
				}else{
					$('.l6').text(s22);
				}
				var data = {"x":s1, "y":s2}
				var jsondata = JSON.stringify(data)
					$.ajax({
						type: 'post',
						data: jsondata,
//						url: "http://127.0.0.1:8000/admin/post_view2.0_2/",
						url: "http://127.0.0.1:8000/admin/new_1/",
						success: function(result){
//						 drawheatmap(result.data);
						console.log(result.data)
						 zzzzz = result.data[0][0];
						 yyyyy = result.data[1][0];
						 xxxxx1 = result.data[2][0]
						 xxxxx2 = result.data[2][1]
						 xxxxx3 = result.data[2][2]
						 console.log(xxxxx1)
						 $("#se2").change(function(){
						 	let hh = $(this).val();
						 	hh = parseInt(hh.substring(4,hh.length))
						 	console.log(zzzzz)
						 	$('.f1').text(zzzzz[hh-1]);
							$('.f2').text(zzzzz[677+hh]);
							$('.f3').text(zzzzz[1355+hh]);
						 })
//						 console.log(RS_list)
						 for(var i = 0; i<zzzzz.length; i++){
						 	if((i/678)<1){
						 		zzzzz_set.push(zzzzz[i]);
						 		yyyyy_set.push(yyyyy[i]);
						 	}else if((i/1356)<1){
						 		zzzzz_set1.push(zzzzz[i])
						 		yyyyy_set1.push(yyyyy[i])
						 	}else{
						 		zzzzz_set2.push(zzzzz[i])
						 		yyyyy_set2.push(yyyyy[i])
						 	}
						 }
						 zzzzz_set_last.push(zzzzz_set);
						 zzzzz_set_last.push(zzzzz_set1);
						 zzzzz_set_last.push(zzzzz_set2);
						 yyyyy_set_last.push(yyyyy_set);
						 yyyyy_set_last.push(yyyyy_set1);
						 yyyyy_set_last.push(yyyyy_set2);
						 
						 for(var p = 0; p<zzzzz_set_last[0].length; p++){
						 	datadetial.push({"roadname":"Road"+(p+1),
						 	                 "pred_flow_now":zzzzz_set_last[2][p], "pred_flow_20":zzzzz_set_last[1][p], "pred_flow_10":zzzzz_set_last[0][p],
						 					 "real_flow_now":yyyyy_set_last[2][p], "real_flow_20":yyyyy_set_last[1][p], "real_flow_10":yyyyy_set_last[0][p]
						 				})
						 }
						 
						draw_road_fist1(zzzzz_set_last[2], RS_list)
						drawPiechart(xxxxx3)
						$(".ol3").css("background-color", "#F2701D")
						$(".p1").css("background-color", "#F2701D")
						var dat111 = d3.selectAll(".roadp").data(datadetial)
						 			   .on("mouseover", function(d){
						 			   		d3.select(this).attr("stroke-width", "12")
											$(".roadP").text(d.roadname);
											$(".f1").text(d.pred_flow_10)
											$(".f2").text(d.real_flow_20)
											$(".f3").text(d.pred_flow_now)
										})
						 			   .on("mouseout", function(){
						 			   		d3.select(this).attr("stroke-width", "6")
						 			   })
						 								   
						$(".ten").on("click", function(){
						 	draw_road_fist1(zzzzz_set_last[0], RS_list)
						 	drawPiechart(xxxxx1)
						 	$(".ol1").css("background-color", "#F2701D")
						 	$(".ol2").css("background-color", "white")
						 	$(".ol3").css("background-color", "white")
						 	var dat111 = d3.selectAll(".roadp").data(datadetial)
						 			   .on("mouseover", function(d){
						 			   		d3.select(this).attr("stroke-width", "12")
											$(".roadP").text(d.roadname);
											$(".f1").text(d.pred_flow_10)
											$(".f2").text(d.real_flow_20)
											$(".f3").text(d.pred_flow_now)
										})
						 			   .on("mouseout", function(){
						 			   		d3.select(this).attr("stroke-width", "6")
						 			   })
						})
						$(".twen").on("click", function(){
						 	draw_road_fist1(zzzzz_set_last[1], RS_list)
						 	drawPiechart(xxxxx2)
						 	$(".ol1").css("background-color", "white")
						 	$(".ol2").css("background-color", "#F2701D")
						 	$(".ol3").css("background-color", "white")
						 	var dat111 = d3.selectAll(".roadp").data(datadetial)
						 			   .on("mouseover", function(d){
						 			   		d3.select(this).attr("stroke-width", "12");
											$(".roadP").text(d.roadname);
											$(".f1").text(d.pred_flow_10)
											$(".f2").text(d.real_flow_20)
											$(".f3").text(d.pred_flow_now)
										})
						 			   .on("mouseout", function(){
						 			   		d3.select(this).attr("stroke-width", "6")
						 			   })
						})
						$(".now").on("click", function(){
						 	draw_road_fist1(zzzzz_set_last[2], RS_list)
						 	drawPiechart(xxxxx3)
						 	$(".ol1").css("background-color", "white")
						 	$(".ol2").css("background-color", "white")
						 	$(".ol3").css("background-color", "#F2701D")
						 	var dat111 = d3.selectAll(".roadp").data(datadetial)
						 			   .on("mouseover", function(d){
						 			   		d3.select(this).attr("stroke-width", "12");
											$(".roadP").text(d.roadname);
											$(".f1").text(d.pred_flow_10)
											$(".f2").text(d.real_flow_20)
											$(".f3").text(d.pred_flow_now)
										})
						 			   .on("mouseout", function(){
						 			   		d3.select(this).attr("stroke-width", "6")
						 			   })
						})
						 
					  	},
					  	dataType: 'JSON',
					});
		})
		
		function draw_road_fist1(A, B){
			d3.selectAll(".roadp").remove();
			var compute = d3.interpolate(c2,c1); 
			var linear = d3.scaleLinear()  
				           .domain([0,d3.max(A)])  
				           .range([0,1]);
  			var res_carflow = A
			var dt = B;
			for(var j = 0; j<dt.length; j++){
			  		if(dt[j].length == 4){
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'roadp'})
			  					    .addTo(map);
			  		}else if(dt[j].length == 3){
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'roadp'})
			  						.addTo(map);
			  		}else{
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'roadp'})
			  						.addTo(map);
			  				}
			  			}
  		}
		
		function clear4(){
			d3.selectAll(".roadp").remove();
			$(".ol1").css("background-color", "white")
			$(".ol2").css("background-color", "white")
			$(".ol3").css("background-color", "white")
			$(".p1").css("background-color", "white")
			$(".p4").css("background-color", "white")
			$(".p7").css("background-color", "white")
			for(let i = 0; i<678; i++ ){
										d3.select(".road"+i).remove();
									}
		}
//*******************************************************饼状图显示预测与真实值之间的差距*******************************************************************************************************************************************************************************************************************************//

		function drawPiechart(data){
			d3.selectAll(".text2").remove()
			d3.selectAll(".rect9").remove()
			d3.select(".svg2").remove()
			d3.select(".cheakbox").remove()
			
			var salesData=[
				{label:"Zero", color:"#032914", show: data.zero},
				{label:"One", color:"#107535",  show: data.one},
				{label:"Two", color:"#2FC25B", show: data.two},
				{label:"Three", color:"#7BDB91", show: data.three},
				{label:"Other", color:"#D7F5DC", show: data.other}];
			var wi1 = 480, he1 = 320, padding1 = {top: 40, right: 40, bottom: 30, left: 50};
			var svg1 = d3.select("#chart3").append("svg")
						 .attr("width", wi1)
						 .attr("height", he1)
					 	 .attr("class", "svg2")
			svg1.append("g").attr("id","salesDonut");
			function randomData(data){
				return salesData.map(function(d, i){ 
					return {label:d.label, value:data.pre[i], color:d.color, show: d.show};});
			} 
			Donut3D.draw("salesDonut", randomData(data), 250, 120, 130, 100, 30, 0.4);
			var gg = svg1.append("g");
			var rect2 = gg.selectAll("rect")
								 .data(salesData)
								 .enter()
								 .append("rect")
								 .attr("fill", function(d,i){
									 return d.color
								 })
								 .attr("y", he1 - 55)
								 .attr("x", function(d, i){return 100 + i*63})
								 .attr("height", 30)
								 .attr("width", 60)
								 .attr("rx", 5)
								 .attr("ry", 5)
								 .attr("class", "rect9")
								 .on("mouseover", function(d, i){
								 	d3.select(this).style("cursor", "pointer")
								 	d3.selectAll(".roadp").attr("stroke-opacity", "0")
								 	let dt = []
									for(let i = 0; i<RS.length; i++){
									  		dt.push(RS[i].R);
									  	}
									for(let j = 0; j<dt.length; j++){
									  		if(dt[j].length == 4){
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
									  					    .addTo(map);
									  		}else if(dt[j].length == 3){
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
									  						.addTo(map);
									  		}else{
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: 'red', opacity: 0, weight: 6, className: 'road'+j})
									  						.addTo(map);
									  				}
									  			}
								 	for(let i = 1; i<679; i++){
								 		if(d.show.indexOf(i) != -1){
								 			d3.select('.road'+ i).attr("stroke", d.color)
								 								 .attr("stroke-opacity", "1")
								 		}
								 	}
								 })
								 .on("mouseout", function(d, i){
								 	for(let i = 0; i<678; i++ ){
										d3.select(".road"+i).remove();
									}
								 	d3.selectAll(".roadp").attr("stroke-opacity", "1")
								 	for(let i = 1; i<679; i++){
								 		if(d.show.indexOf(i) != -1){
								 			d3.select('.road'+ i).attr("stroke", d.color)
								 								 .attr("stroke-opacity", "0")
								 		}
								 	}
								 })
			var text2 = gg.selectAll("text")
						  .data(salesData)
						  .enter()
						  .append("text")
						  .attr("y", he1 - 50)
						  .attr("x", function(d, i){return 130 + i*63})
						  .attr("dy",15)
						  .attr("font-weight", 600)
						  .attr("fill", "white")
						  .attr("text-anchor","middle")
						  .attr("class", "text2")
						  .text(function(d){return d.label})
						  .on("mouseover", function(d, i){
								 	d3.select(this).style("cursor", "pointer")
								 	d3.selectAll(".roadp").attr("stroke-opacity", "0")
								 	let dt = []
									for(let i = 0; i<RS.length; i++){
									  		dt.push(RS[i].R);
									  	}
									for(let j = 0; j<dt.length; j++){
									  		if(dt[j].length == 4){
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
									  					    .addTo(map);
									  		}else if(dt[j].length == 3){
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
									  						.addTo(map);
									  		}else{
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: 'red', opacity: 0, weight: 6, className: 'road'+j})
									  						.addTo(map);
									  				}
									  			}
								 	for(let i = 1; i<679; i++){
								 		if(d.show.indexOf(i) != -1){
								 			d3.select('.road'+ i).attr("stroke", d.color)
								 								 .attr("stroke-opacity", "1")
								 		}
								 	}
								 })
								 .on("mouseout", function(d, i){
								 	for(let i = 0; i<678; i++ ){
										d3.select(".road"+i).remove();
									}
								 	d3.selectAll(".roadp").attr("stroke-opacity", "1")
								 	for(let i = 1; i<679; i++){
								 		if(d.show.indexOf(i) != -1){
								 			d3.select('.road'+ i).attr("stroke", d.color)
								 								 .attr("stroke-opacity", "0")
								 		}
								 	}
								 })
								 
			var cheakbox = d3.select("#chart3").append("input")
							                   .attr("class", "cheakbox")
							                   .attr("type", "checkbox")
							                   .on("mouseover", function(){
							                   		d3.select(this).style("cursor", "pointer")
							                   })
			$('.cheakbox').bind('click',function(){  
			    if($(this).is(':checked')){  
			           d3.selectAll(".roadp").attr("stroke-opacity", "0")
					   let dt = []
					   for(let i = 0; i<RS.length; i++){
					  		   dt.push(RS[i].R);
					  	   }
					   for(let j = 0; j<dt.length; j++){
					  		   if(dt[j].length == 4){
					  			   polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
					  					       .addTo(map);
					  		   }else if(dt[j].length == 3){
					  			   polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
					  						   .addTo(map);
					  		   }else{
					  			   polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
					  						   .addTo(map);
					  				   }
					  			   }
					   for(let i = 1; i<679; i++){
					   		for(let j = 0; j<salesData.length; j++){
					   			if(salesData[j].show.indexOf(i) != -1){
					 			d3.select('.road'+ i).attr("stroke", salesData[j].color)
					 								 .attr("stroke-opacity", "1")
					 		}
					   		}
					 	}
			           
			    }else{ 
			    	  for(let i = 0; i<678; i++ ){
										d3.select(".road"+i).remove();
									}
			          d3.selectAll(".roadp").attr("stroke-opacity", "1")
			    }
			    })

		}				  
//*******************************************************饼状图显示预测与真实值之间的差距*******************************************************************************************************************************************************************************************************************************//
		
		function drawheatmap(A){
			var datatt;
			var points = [];
			let tempp;
			let vall = A[A.length-1]
			let fff = d3.max(vall)
			for (var i = 0; i<A.length-1; i++){
				for (var j = 0; j<A[i].R.length-1; j++){
					if(vall[i]< fff/3){tempp = 20}else if(vall[i]< (2*fff)/3){tempp = 13}else{tempp = 7}
					createdata(tempp, 0.0010, A[i].R[j], A[i].R[j+1], vall[i])
				}
			}
//			console.log(datatt)
			datatt = {'max': fff, 'data':points}
			console.log(datatt)
			var heatmap_layer = new HeatmapOverlay(heatmap_cfg).addTo(map);
			heatmap_layer.setData(datatt);
			
			
			function createdata(number, radius, A, B, C) {
				var len = number;
//				var points = [];
				var max = 0; //单点最大值
				var a = parseFloat(A.lat),
					b = parseFloat(B.lat),
					a1 = parseFloat(A.lng),
					b1 = parseFloat(B.lng);
				var min1 = d3.min([a, a1]),
					max1 = d3.max([a, a1]),
					min2 = d3.min([b, b1]),
					max2 = d3.max([b, b1])
				var x = d3.scaleLinear()
					.domain([0, 1])
					.range([a, b])
			
				var y = d3.scaleLinear()
					.domain([0, 1])
					.range([a1, b1])
				for (; number > 0; number--) {
					var Q = number / len;
					var val = number;
					max = Math.max(max, val);
					var point = {
						"lat": x(Q), //经度
						"lng": y(Q), //纬度
						"count": val, //数据量大小
						"radius": radius
					};
					points.push(point);
				}
//				return points
			};
		};
					
					
		
			 // #F2AF1A #74F21A rgb(242,196,26) rgb(103,242,26)
		const c5 = d3.rgb(255,121,0);    //红色  
		const c6 = d3.rgb(219,255,0);    //绿色 
		var flowMax = 30
		var flow_co = d3.interpolate(c5,c6); 
		var linear_flow = d3.scaleLinear()  
			           .domain([0,flowMax])  
			           .range([0,1]);
		console.log(flow_co(linear_flow(10)))
	    var heatmap_cfg={
	        "radius":"radius",          //设置每一个热力点的半径
	        "maxOpacity":.5,           //设置最大的不透明度
	        "scaleRadius":true,         //设置热力点是否平滑过渡
	        "blur": 0.95,               //系数越高，渐变越平滑，默认是0.85,
	                                    //滤镜系数将应用于所有热点数据。
	        "useLocalExtrema": false,    //使用局部极值
	        "latField":"lat",           //纬度
	        "lngField":"lng",           //经度
	        "valueField":"value",       //热力点的值
	      "gradient": {   
//	      				"0.99": "rgba(255,0,0,1)",
//	//						"1": "rgba(252,185,126, 1)",
//	                      "0.7": "rgba(255,157,70,1)",
//	                      "0.6": "rgba(255,185,70,1)",
//	                      "0.4": "rgba(255,193,70,1)",
//	                      "0": "rgba(255,240,70,1)"
						  '.01': flow_co(linear_flow(flowMax * 0.01)),
				          '.5': flow_co(linear_flow(flowMax * 0.1)),
				          '.99': flow_co(linear_flow(flowMax * 0.99)),
//				          '.1': flow_co(linear_flow(flowMax * 0.1)),
//				          '.2': flow_co(linear_flow(flowMax * 0.2)),
//				          '.3': flow_co(linear_flow(flowMax * 0.3)),
//				           '.4': flow_co(linear_flow(flowMax * 0.4)),
//				          '.5': flow_co(linear_flow(flowMax * 0.5)),
//				          '.6': flow_co(linear_flow(flowMax * 0.6)),
//				          '.7': flow_co(linear_flow(flowMax * 0.7)),
//				          '.8': flow_co(linear_flow(flowMax * 0.8)),
//				          '.99': flow_co(linear_flow(flowMax * 0.99)),
	                  }
	    }
	    
	    var heatmap_layer = new HeatmapOverlay(heatmap_cfg);
//*******************************************热力图**************************************************//
});